import React from "react";

function Fun (props) {
  return (
    <div>
      函数组件的默认props: { props.pageSize }
    </div>
  )
}

function Fun2 ({ pageSize = 10 }) {
  return (
    <div>
      函数组件2的默认props: { pageSize }
    </div>
  )
}

Fun.defaultProps = {
  pageSize: 10
}

class Class extends React.Component {
  static defaultProps = {
    pageSize: 15
  }

  render() {
    return (
      <> 
        <br />
        类组件的默认props: { this.props.pageSize }
      </>
    )
  }
}

class Class2 extends React.Component {
  render() {
    return (
      <> 
        <br />
        类组件2的默认props: { this.props.pageSize }
      </>
    )
  }
}

Class2.defaultProps = {
  pageSize: 1
}

// react类组件
class App extends React.Component {
  // 渲染ui结构
  render() {
    return (
      <>
        <Fun pageSize={ 20 }></Fun>
        <Fun2 pageSize={ 22 }></Fun2>
        <Class ></Class>
        <Class2></Class2>
      </>
    )
  }
}

export default App;
